<template>
  <div>
      <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>个人预约</el-breadcrumb-item>
            <el-divider></el-divider>
        </el-breadcrumb>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2"></el-col>
            <el-col :span="11">
              <i prefix-icon="el-icon-time"></i>
              <el-select v-model="value"  placeholder="选择时间" clearable>
                  <el-option
                    v-for="item in times"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                   >
                  </el-option>
                </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="展馆区域" prop="region">
          <el-cascader
              props.multiple = true
              v-model="ruleForm.region"
              :options="options"
              :props="cateProps"
              size="medium"
              clearable></el-cascader>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

  </div>
</template>

<script>
export default {
  data () {
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      activeIndex: '1',
      ruleForm: {
        name: '',
        region: 0,
        mobile: ''
      },
      stringResul: 0,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择预约项目', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },

      cateProps: { multiple: true, emitPath: false },
     options: [
        {
          value: 1,
          label: "全部预约",
          children: [
            {
              value: 2,
              label: "二楼",
              children: [
                { value: "xsss", label: "学生宿舍" },
                { value: "xyjws", label: "校园警务室" },
                { value: "jxl", label: "教学楼安全" },
                { value: "yjjy", label: "应急救援" },
                { value: "wb", label: "网吧" },
                { value: "xc", label: "校车安全" },
                { value: "sd", label: "书店" },
              ],
            },
            {
              value: 3,
              label: "三楼",
              children: [
                { value: 'wc', label: '重点车辆安全' },
                { value: 'kycaq', label: '客运车安全' },
                { value: 'spjgxzf', label: '食品加工小作坊' },
                { value: 'bmcs', label: '便民超市' },
                { value: 'cydcf', label: '餐饮店厨房' },
                { value: 'tzc', label: '童装厂' },
                { value: 'czw', label: '居住出租屋' },
                { value: 'yz', label: '寄递安全' }
          ]
            },
            {
              value: 4,
              label: "四楼",
               children: [
                { value: 'dxylss', label: '特种设备' },
                { value: 'dg', label: '施工用电安全' },
                { value: 'guojia', label: '国家安全' },
                { value: 'jzsgaq', label: '建筑工地安全'},
                { value: 'hdzl', label: '生态治理' },
                { value: 'rq', label: '燃气安全' },
                { value: 'sccj', label: '生产车间' },
                { value: 'xj', label: '防范邪教' },
                { value: 'fank', label: '反恐防暴' },
                { value: 'weih', label: '危化企业' }
          ]
            },
          ],
        },
      ],
      times: [{
          value: '选项1',
          label: '上午'
        }, {
          value: '选项2',
          label: '下午'
        }],
        value: ''
    }
  },
  created () {
  },
  methods: {
    async submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          console.log(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })

      const data = await this.$http.post('appointment/establish', this.ruleForm)
      const qwe = JSON.parse(data.request.responseText)
      this.stringResul = qwe.ops[0].number
      const numbers = this.ruleForm.mobile
      const {
        data: res
      } = await this.$http.post('sendmYYH', {
        numbers: numbers,
        number: this.stringResul
      })
      console.log(res)
      if (res) {
        this.$message.success('注册成功预约号已发送手机')
      }
      console.log(data)
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .el-form{
    width: 50%;
    margin-left: 13%;
    margin-top: 3%;
    padding: 5%;
    background-color: #fff;
  }
</style>
